<style>
    .mockup-bg {
        background: #fff url("__CDN__/assets/addons/mental/img/statusbar.png") center 20px no-repeat;
        width: 400px;
        min-width: 400px;
        margin:0 auto;
        height: 800px;
        display: block;
        float: left;
        box-shadow: 0 4px 25px 0 rgba(4, 40, 60, .15);
        border-radius: 25px;
        padding: 44px 10px 10px 10px;
    }

    .mockup-bg iframe {
        height: 100%;
        width: 100%;
    }
</style>
<div class="panel panel-default panel-intro" style="background-color:transparent;">
    {:build_heading()}

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="row">
                <div class="col-xs-12 col-sm-12 tab-content">
                    <div style="padding:20px;position:relative;min-height:820px;display:flex;">
                        <div class="mockup-bg">
                            <iframe scrolling="auto" frameborder="0" src="{$mobileurl|default='__CDN__/assets/addons/mental/preview.html'}" class="iframe" id="previewiframe"></iframe>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
